<template>
  <div class="wrapper" :style="wrapper">
    <div class="container">
      <h1 class="title">学生排课系统</h1>
      <div class="entry">
        <router-link class="entry-link" to="admin/login">管理员教师入口</router-link>
        <router-link class="entry-link" to="student/login">学生入口</router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      wrapper: {
        backgroundImage: "url(" + require("../images/img_1.png") + ")",
        backgroundSize: 'cover'



      },
    }
  }
}
</script>
<style lang="less" scoped>
.wrapper {
  background-image: "@/images/psb.jpg";
  height: 100%;
  width: 100%;
  position: absolute;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.title {
  font-size: 3rem;
  text-align: center;
  margin-bottom: 2rem;
}

.entry {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.entry-link {
  font-size: 2rem;
  margin: 1rem;
  padding: 1rem 2rem;
  border-radius: 1rem;
  background-color: #eee;
  color: #333;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.entry-link:hover {
  background-color: #333;
  color: #eee;
}
</style>
